<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function reactive(target) {
        return new Proxy(target, {
          get(target, key, receiver) {
            /*
              target    是整个对象
              key       是读取的某个属性名
              receiver  生成的 proxy 实例
            */
            console.log("get()");
            // return target[key];
            return Reflect.get(target, key, receiver);
          },
          set(target, key, val, receiver) {
            console.log("set()");
            // target[key] = val;
            Reflect.set(target, key, val, receiver);
          },
        });
      }

      const person = {
        name: "jack",
      };

      // if ('age' in person) {}
      // if (person.hasOwnProperty("age")) {}
      // Reflect.has(person, 'age');

      // delete person.age;
      // Reflect.defineProperty(person, "age");

      const proxy = reactive(person);

      proxy.name; // 触发 get
      proxy.name = "rose"; // 触发 set

      proxy.age; // 触发 get
      proxy.age = 18; // 触发 set
    </script>
  </body>
</html>
